<!-- 全局 card 模板 -->
<template>
  <div>
    <!-- 外层面包屑 -->
    <!-- <el-card shadow="never" class="breadcrumb_wrap" ref="breadcrumb_wrap" v-show="isShow && position == 'out'">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item><a href="/">活动管理</a></el-breadcrumb-item>
        <el-breadcrumb-item>活动列表</el-breadcrumb-item>
        <el-breadcrumb-item>活动详情</el-breadcrumb-item>
      </el-breadcrumb>
    </el-card> -->
    <el-card class="base-card" id="breadcrumb_wrap" :class="{'out_base-card': this.isShow == true && this.position == 'out'}">
      <!-- <el-breadcrumb separator="/" v-show="isShow && position == 'in'">
        <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      </el-breadcrumb> -->
      <slot></slot>
    </el-card>
  </div>
</template>

<script>
export default {
  props: {
    isShow: { type: Boolean, default: true }, //是否显示面包屑
    position: { type: String, default: "" }, //面包屑显示位置  out in
  },
  watch: {
    
  },
  mounted() {
    
  },
  methods: {
    asd() {
      console.log(111)
    }
  }
}
</script>

<style scoped lang="scss">
//面包屑样式
.breadcrumb_wrap{
  border: none;
   /deep/ .el-card__body {
    padding: 0 20px;
  }
  height: 40px;
  overflow: hidden;
  margin: 10px 0;
}
.el-breadcrumb{
  line-height: 40px;
}

// card 样式设置
.base-card {
  margin: 10px;
  height: calc(100vh - 140px);
  min-height: 500px;
  transition: 0s;
  /deep/ .el-card__body {
    padding: 0 10px 10px;
  }
  &.out_base-card{
    margin-top: 0px;
    height: calc(100vh - 180px);
  }
}
/deep/.el-card__body{
  height: 100% !important;
}
</style>